<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能看护车远程监控平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        success: '#00B42A',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-scale {
                transition: transform 0.2s ease-in-out;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="main-header">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 左侧Logo和标题 -->
                <div class="flex items-center space-x-3">
                    <div class="bg-primary text-white rounded-lg p-2">
                        <i class="fa-solid fa-shield-heart text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-primary">智能看护车监控系统</h1>
                        <p class="text-xs text-gray-500">远程可视化交互平台</p>
                    </div>
                </div>
                
                <!-- 中间搜索栏 -->
                <div class="hidden md:block flex-1 max-w-md mx-8">
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa-solid fa-search text-gray-400"></i>
                        </div>
                        <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="搜索设备、区域或异常...">
                    </div>
                </div>
                
                <!-- 右侧用户信息 -->
                <div class="flex items-center space-x-4">
                    <button class="relative p-2 text-gray-500 hover:text-primary transition-colors">
                        <i class="fa-solid fa-bell"></i>
                        <span class="absolute top-1 right-1 h-2 w-2 rounded-full bg-danger"></span>
                    </button>
                    <button class="relative p-2 text-gray-500 hover:text-primary transition-colors">
                        <i class="fa-solid fa-cog"></i>
                    </button>
                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                        <div class="hidden md:block">
                            <p class="text-sm font-medium">王护士</p>
                            <p class="text-xs text-gray-500">高级护理员</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-1 flex overflow-hidden">
        <!-- 侧边导航 -->
        <aside class="w-64 bg-white shadow-sm hidden md:block overflow-y-auto scrollbar-hide transition-all duration-300" id="sidebar">
            <nav class="py-4">
                <div class="px-4 mb-6">
                    <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">主要功能</h2>
                    <div class="mt-4 space-y-1">
                        <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md bg-primary/10 text-primary">
                            <i class="fa-solid fa-desktop mr-3 text-primary"></i>
                            控制台
                        </a>
                        <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                            <i class="fa-solid fa-video mr-3 text-gray-400 group-hover:text-primary"></i>
                            视频监控
                        </a>
                        <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                            <i class="fa-solid fa-map-location-dot mr-3 text-gray-400 group-hover:text-primary"></i>
                            路径规划
                        </a>
                        <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                            <i class="fa-solid fa-bell-concierge mr-3 text-gray-400 group-hover:text-primary"></i>
                            异常管理
                        </a>
                        <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                            <i class="fa-solid fa-chart-line mr-3 text-gray-400 group-hover:text-primary"></i>
                            数据分析
                        </a>
                    </div>
                </div>
                
                <div class="px-4 mb-6">
                    <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">设备管理</h2>
                    <div class="mt-4 space-y-1">
                        <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                            <i class="fa-solid fa-truck-medical mr-3 text-gray-400 group-hover:text-primary"></i>
                            看护车列表
                        </a>
                        <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                            <i class="fa-solid fa-map-marker-alt mr-3 text-gray-400 group-hover:text-primary"></i>
                            区域管理
                        </a>
                        <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                            <i class="fa-solid fa-users mr-3 text-gray-400 group-hover:text-primary"></i>
                            人员管理
                        </a>
                    </div>
                </div>
                
                <div class="px-4 mb-6">
                    <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">系统设置</h2>
                    <div class="mt-4 space-y-1">
                        <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                            <i class="fa-solid fa-user-cog mr-3 text-gray-400 group-hover:text-primary"></i>
                            用户管理
                        </a>
                        <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                            <i class="fa-solid fa-cogs mr-3 text-gray-400 group-hover:text-primary"></i>
                            系统配置
                        </a>
                        <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                            <i class="fa-solid fa-file-text mr-3 text-gray-400 group-hover:text-primary"></i>
                            日志管理
                        </a>
                    </div>
                </div>
                
                <div class="px-4 mt-8">
                    <div class="bg-primary/5 rounded-lg p-4">
                        <h3 class="text-sm font-medium text-primary mb-2">在线帮助</h3>
                        <p class="text-xs text-gray-600 mb-3">需要帮助？查看我们的文档或联系技术支持。</p>
                        <button class="w-full bg-primary hover:bg-primary/90 text-white text-xs font-medium py-2 px-4 rounded-md transition-colors">
                            <i class="fa-solid fa-question-circle mr-1"></i> 查看帮助中心
                        </button>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- 移动端菜单按钮 -->
        <button class="fixed bottom-4 right-4 bg-primary text-white p-3 rounded-full shadow-lg md:hidden z-40" id="mobile-menu-button">
            <i class="fa-solid fa-bars"></i>
        </button>

        <!-- 移动端侧边栏 -->
        <div class="fixed inset-0 bg-black bg-opacity-50 z-40 transform translate-x-full transition-transform duration-300 md:hidden" id="mobile-sidebar">
            <div class="absolute inset-y-0 left-0 w-64 bg-white shadow-lg overflow-y-auto">
                <!-- 侧边栏内容（与桌面版相同） -->
                <nav class="py-4">
                    <div class="px-4 mb-6">
                        <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">主要功能</h2>
                        <div class="mt-4 space-y-1">
                            <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md bg-primary/10 text-primary">
                                <i class="fa-solid fa-desktop mr-3 text-primary"></i>
                                控制台
                            </a>
                            <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa-solid fa-video mr-3 text-gray-400 group-hover:text-primary"></i>
                                视频监控
                            </a>
                            <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa-solid fa-map-location-dot mr-3 text-gray-400 group-hover:text-primary"></i>
                                路径规划
                            </a>
                            <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa-solid fa-bell-concierge mr-3 text-gray-400 group-hover:text-primary"></i>
                                异常管理
                            </a>
                            <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa-solid fa-chart-line mr-3 text-gray-400 group-hover:text-primary"></i>
                                数据分析
                            </a>
                        </div>
                    </div>
                    <!-- 其余内容省略，与桌面版相同 -->
                </nav>
            </div>
            <button class="absolute inset-0 focus:outline-none" id="mobile-sidebar-close"></button>
        </div>

        <!-- 内容区域 -->
        <div class="flex-1 overflow-y-auto bg-gray-50 p-4 md:p-6 lg:p-8" id="main-content">
            <!-- 面包屑导航 -->
            <div class="flex items-center text-sm text-gray-500 mb-6">
                <a href="#" class="hover:text-primary">首页</a>
                <i class="fa-solid fa-chevron-right mx-2 text-xs"></i>
                <span class="text-gray-700">控制台</span>
            </div>
            
            <!-- 页面标题 -->
            <div class="mb-8">
                <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">智能看护车监控中心</h1>
                <p class="text-gray-500 mt-1">实时监控看护车运行状态，管理路径规划和异常情况</p>
            </div>
            
            <!-- 状态卡片区域 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                <!-- 在线设备卡片 -->
                <div class="bg-white rounded-xl p-5 card-shadow hover-scale">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm font-medium">在线设备</p>
                            <h3 class="text-3xl font-bold mt-1" id="online-devices">12</h3>
                            <p class="text-success text-xs flex items-center mt-2">
                                <i class="fa-solid fa-arrow-up mr-1"></i> 2 台 (较昨日)
                            </p>
                        </div>
                        <div class="bg-primary/10 p-3 rounded-lg">
                            <i class="fa-solid fa-truck-medical text-primary text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex justify-between text-xs text-gray-500">
                            <span>总设备: 15</span>
                            <span>离线: 3</span>
                        </div>
                    </div>
                </div>
                
                <!-- 今日任务卡片 -->
                <div class="bg-white rounded-xl p-5 card-shadow hover-scale">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm font-medium">今日任务</p>
                            <h3 class="text-3xl font-bold mt-1" id="today-tasks">42</h3>
                            <p class="text-danger text-xs flex items-center mt-2">
                                <i class="fa-solid fa-arrow-down mr-1"></i> 5 个 (较昨日)
                            </p>
                        </div>
                        <div class="bg-secondary/10 p-3 rounded-lg">
                            <i class="fa-solid fa-list-check text-secondary text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex justify-between text-xs text-gray-500">
                            <span>已完成: 28</span>
                            <span>进行中: 14</span>
                        </div>
                    </div>
                </div>
                
                <!-- 异常事件卡片 -->
                <div class="bg-white rounded-xl p-5 card-shadow hover-scale">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm font-medium">异常事件</p>
                            <h3 class="text-3xl font-bold mt-1" id="abnormal-events">3</h3>
                            <p class="text-warning text-xs flex items-center mt-2">
                                <i class="fa-solid fa-exclamation-circle mr-1"></i> 需要处理
                            </p>
                        </div>
                        <div class="bg-warning/10 p-3 rounded-lg">
                            <i class="fa-solid fa-triangle-exclamation text-warning text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex justify-between text-xs text-gray-500">
                            <span>已解决: 12</span>
                            <span>未解决: 3</span>
                        </div>
                    </div>
                </div>
                
                <!-- 电池状态卡片 -->
                <div class="bg-white rounded-xl p-5 card-shadow hover-scale">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-500 text-sm font-medium">平均电池电量</p>
                            <h3 class="text-3xl font-bold mt-1" id="avg-battery">86%</h3>
                            <p class="text-success text-xs flex items-center mt-2">
                                <i class="fa-solid fa-battery-three-quarters mr-1"></i> 状态良好
                            </p>
                        </div>
                        <div class="bg-success/10 p-3 rounded-lg">
                            <i class="fa-solid fa-battery-full text-success text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex justify-between text-xs text-gray-500">
                            <span>最低电量: 65%</span>
                            <span>需充电: 1</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 视频监控和地图区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                <!-- 视频监控区域 -->
                <div class="lg:col-span-2 bg-white rounded-xl overflow-hidden card-shadow">
                    <div class="p-5 border-b border-gray-100 flex justify-between items-center">
                        <h2 class="font-semibold text-lg">实时视频监控</h2>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-xs bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                                <i class="fa-solid fa-refresh mr-1"></i> 刷新
                            </button>
                            <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200 transition-colors">
                                <i class="fa-solid fa-expand mr-1"></i> 全屏
                            </button>
                        </div>
                    </div>
                    
                    <div class="relative">
                        <!-- 主视频流 -->
                        <div class="aspect-video bg-gray-900 relative">
                            <img src="https://picsum.photos/id/237/800/450" alt="主视频流" class="w-full h-full object-cover">
                            <div class="absolute top-3 left-3 bg-danger/80 text-white text-xs px-2 py-1 rounded flex items-center">
                                <span class="w-2 h-2 bg-white rounded-full mr-1 animate-pulse"></span> 直播中
                            </div>
                            <div class="absolute bottom-3 left-3 bg-black/50 text-white text-xs px-2 py-1 rounded">
                                设备ID: HC-2023005
                            </div>
                            <div class="absolute bottom-3 right-3 bg-black/50 text-white text-xs px-2 py-1 rounded">
                                <i class="fa-solid fa-signal mr-1"></i> 信号强度: 4G (95%)
                            </div>
                        </div>
                        
                        <!-- 视频控制栏 -->
                        <div class="bg-white p-4 flex justify-between items-center">
                            <div class="flex items-center space-x-4">
                                <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">
                                    <i class="fa-solid fa-backward"></i>
                                </button>
                                <button class="p-3 rounded-full bg-primary text-white hover:bg-primary/90 transition-colors">
                                    <i class="fa-solid fa-pause"></i>
                                </button>
                                <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">
                                    <i class="fa-solid fa-forward"></i>
                                </button>
                                <span class="text-sm text-gray-500">14:22:35</span>
                            </div>
                            <div class="flex items-center space-x-4">
                                <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">
                                    <i class="fa-solid fa-volume-up"></i>
                                </button>
                                <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">
                                    <i class="fa-solid fa-cog"></i>
                                </button>
                                <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">
                                    <i class="fa-solid fa-download"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 视频切换 -->
                        <div class="p-4 grid grid-cols-4 gap-3">
                            <div class="aspect-video bg-gray-200 rounded overflow-hidden relative cursor-pointer border-2 border-primary">
                                <img src="https://picsum.photos/id/237/200/150" alt="视频1" class="w-full h-full object-cover">
                                <div class="absolute inset-0 bg-primary/20"></div>
                                <div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 text-center">
                                    主摄像头
                                </div>
                            </div>
                            <div class="aspect-video bg-gray-200 rounded overflow-hidden relative cursor-pointer hover:opacity-90 transition-opacity">
                                <img src="https://picsum.photos/id/1005/200/150" alt="视频2" class="w-full h-full object-cover">
                                <div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 text-center">
                                    前视摄像头
                                </div>
                            </div>
                            <div class="aspect-video bg-gray-200 rounded overflow-hidden relative cursor-pointer hover:opacity-90 transition-opacity">
                                <img src="https://picsum.photos/id/1006/200/150" alt="视频3" class="w-full h-full object-cover">
                                <div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 text-center">
                                    后视摄像头
                                </div>
                            </div>
                            <div class="aspect-video bg-gray-200 rounded overflow-hidden relative cursor-pointer hover:opacity-90 transition-opacity">
                                <img src="https://picsum.photos/id/1011/200/150" alt="视频4" class="w-full h-full object-cover">
                                <div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 text-center">
                                    室内摄像头
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 地图和路径规划区域 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow">
                    <div class="p-5 border-b border-gray-100 flex justify-between items-center">
                        <h2 class="font-semibold text-lg">路径规划与导航</h2>
                        <button class="text-primary text-sm hover:text-primary/80 transition-colors">
                            <i class="fa-solid fa-plus mr-1"></i> 新建路径
                        </button>
                    </div>
                    
                    <!-- 地图区域 -->
                    <div class="aspect-video bg-gray-200 relative">
                        <img src="https://picsum.photos/id/1029/400/300" alt="地图" class="w-full h-full object-cover">
                        
                        <!-- 地图控制按钮 -->
                        <div class="absolute top-3 right-3 bg-white rounded-lg shadow-lg">
                            <button class="p-2 border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                <i class="fa-solid fa-plus"></i>
                            </button>
                            <button class="p-2 hover:bg-gray-50 transition-colors">
                                <i class="fa-solid fa-minus"></i>
                            </button>
                        </div>
                        
                        <!-- 位置标记 -->
                        <div class="absolute top-1/2 left-1/3 transform -translate-x-1/2 -translate-y-1/2">
                            <div class="w-6 h-6 bg-primary rounded-full flex items-center justify-center text-white animate-pulse">
                                <i class="fa-solid fa-truck-medical text-xs"></i>
                            </div>
                        </div>
                        
                        <!-- 路径线 -->
                        <svg class="absolute inset-0 w-full h-full" xmlns="http://www.w3.org/2000/svg">
                            <path d="M100,150 Q150,100 200,150 T300,120" stroke="#165DFF" stroke-width="3" fill="none" stroke-dasharray="5,3" />
                        </svg>
                        
                        <!-- 当前位置信息 -->
                        <div class="absolute bottom-3 left-3 right-3 bg-white rounded-lg shadow-lg p-3">
                            <h3 class="font-medium text-sm">当前位置</h3>
                            <p class="text-xs text-gray-500">老年公寓B栋 - 3楼走廊</p>
                            <div class="flex justify-between items-center mt-2">
                                <span class="text-xs text-gray-500">速度: 0.8 m/s</span>
                                <span class="text-xs text-gray-500">方向: 东北</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 路径规划表单 -->
                    <div class="p-4">
                        <h3 class="text-sm font-medium mb-3">设置新导航目标</h3>
                        <div class="space-y-3">
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">起点</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fa-solid fa-location-dot text-primary"></i>
                                    </div>
                                    <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="当前位置" value="老年公寓B栋 - 3楼走廊" readonly>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">终点</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fa-solid fa-flag text-warning"></i>
                                    </div>
                                    <select class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary appearance-none bg-white">
                                        <option value="">选择目标位置...</option>
                                        <option value="nursing-station">护士站</option>
                                        <option value="rehab-room">康复室</option>
                                        <option value="dining-hall">食堂</option>
                                        <option value="garden">花园</option>
                                        <option value="room-301">301房间</option>
                                        <option value="room-302">302房间</option>
                                        <option value="room-303">303房间</option>
                                    </select>
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        <i class="fa-solid fa-chevron-down text-gray-400"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-xs text-gray-500 mb-1">路径类型</label>
                                <div class="flex space-x-2">
                                    <label class="flex items-center">
                                        <input type="radio" name="route-type" class="h-4 w-4 text-primary focus:ring-primary border-gray-300" checked>
                                        <span class="ml-2 text-xs text-gray-700">最短路径</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" name="route-type" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                        <span class="ml-2 text-xs text-gray-700">平稳路径</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" name="route-type" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                        <span class="ml-2 text-xs text-gray-700">无障碍</span>
                                    </label>
                                </div>
                            </div>
                            
                            <button class="w-full bg-primary hover:bg-primary/90 text-white text-sm font-medium py-2 px-4 rounded-md transition-colors">
                                <i class="fa-solid fa-location-arrow mr-1"></i> 发送导航指令
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 设备状态和异常信息区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 设备状态区域 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow">
                    <div class="p-5 border-b border-gray-100 flex justify-between items-center">
                        <h2 class="font-semibold text-lg">设备状态监控</h2>
                        <div class="relative">
                            <button class="text-gray-500 hover:text-primary transition-colors">
                                <i class="fa-solid fa-ellipsis-vertical"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="p-4">
                        <canvas id="deviceStatusChart" height="220"></canvas>
                    </div>
                    
                    <div class="px-4 pb-4">
                        <div class="grid grid-cols-3 gap-2 text-center">
                            <div class="p-3 bg-success/5 rounded-lg">
                                <p class="text-xs text-gray-500">运行中</p>
                                <p class="text-lg font-bold text-success" id="running-devices">8</p>
                            </div>
                            <div class="p-3 bg-warning/5 rounded-lg">
                                <p class="text-xs text-gray-500">待机中</p>
                                <p class="text-lg font-bold text-warning" id="standby-devices">4</p>
                            </div>
                            <div class="p-3 bg-danger/5 rounded-lg">
                                <p class="text-xs text-gray-500">离线</p>
                                <p class="text-lg font-bold text-danger" id="offline-devices">3</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 异常事件区域 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow">
                    <div class="p-5 border-b border-gray-100 flex justify-between items-center">
                        <h2 class="font-semibold text-lg">异常事件</h2>
                        <button class="text-primary text-sm hover:text-primary/80 transition-colors">
                            查看全部
                        </button>
                    </div>
                    
                    <div class="divide-y divide-gray-100">
                        <div class="p-4 hover:bg-gray-50 transition-colors">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 p-2 bg-danger/10 rounded-full">
                                    <i class="fa-solid fa-exclamation-triangle text-danger"></i>
                                </div>
                                <div class="ml-3 flex-1">
                                    <div class="flex items-center justify-between">
                                        <h3 class="text-sm font-medium">碰撞检测</h3>
                                        <span class="text-xs text-gray-500">10分钟前</span>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">设备HC-2023007在老年公寓A栋走廊发生轻微碰撞</p>
                                    <div class="mt-2 flex justify-between items-center">
                                        <span class="text-xs bg-danger/10 text-danger px-2 py-1 rounded">紧急</span>
                                        <button class="text-xs text-primary hover:text-primary/80 transition-colors">
                                            处理
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-4 hover:bg-gray-50 transition-colors">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 p-2 bg-warning/10 rounded-full">
                                    <i class="fa-solid fa-battery-quarter text-warning"></i>
                                </div>
                                <div class="ml-3 flex-1">
                                    <div class="flex items-center justify-between">
                                        <h3 class="text-sm font-medium">低电量警告</h3>
                                        <span class="text-xs text-gray-500">30分钟前</span>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">设备HC-2023003电池电量低于20%，需要充电</p>
                                    <div class="mt-2 flex justify-between items-center">
                                        <span class="text-xs bg-warning/10 text-warning px-2 py-1 rounded">警告</span>
                                        <button class="text-xs text-primary hover:text-primary/80 transition-colors">
                                            处理
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-4 hover:bg-gray-50 transition-colors">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 p-2 bg-warning/10 rounded-full">
                                    <i class="fa-solid fa-signal text-warning"></i>
                                </div>
                                <div class="ml-3 flex-1">
                                    <div class="flex items-center justify-between">
                                        <h3 class="text-sm font-medium">信号弱</h3>
                                        <span class="text-xs text-gray-500">1小时前</span>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">设备HC-2023009在地下车库信号强度弱，可能影响通信</p>
                                    <div class="mt-2 flex justify-between items-center">
                                        <span class="text-xs bg-warning/10 text-warning px-2 py-1 rounded">警告</span>
                                        <button class="text-xs text-primary hover:text-primary/80 transition-colors">
                                            处理
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 设备列表区域 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow">
                    <div class="p-5 border-b border-gray-100 flex justify-between items-center">
                        <h2 class="font-semibold text-lg">设备列表</h2>
                        <div class="relative">
                            <input type="text" class="pl-8 pr-3 py-1 border border-gray-300 rounded-md text-xs placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="搜索设备...">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa-solid fa-search text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-100">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备ID</th>
                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">位置</th>
                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">电池</th>
                                    <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-100">
                                <tr>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-8 w-8 bg-primary/10 rounded-full flex items-center justify-center">
                                                <i class="fa-solid fa-truck-medical text-primary text-xs"></i>
                                            </div>
                                            <div class="ml-3">
                                                <div class="text-sm font-medium">HC-2023005</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">老年公寓B栋</td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">运行中</span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-success h-2 rounded-full" style="width: 92%"></div>
                                        </div>
                                        <span class="text-xs text-gray-500">92%</span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 transition-colors">查看</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-8 w-8 bg-primary/10 rounded-full flex items-center justify-center">
                                                <i class="fa-solid fa-truck-medical text-primary text-xs"></i>
                                            </div>
                                            <div class="ml-3">
                                                <div class="text-sm font-medium">HC-2023003</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">康复中心</td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">低电量</span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-warning h-2 rounded-full" style="width: 18%"></div>
                                        </div>
                                        <span class="text-xs text-gray-500">18%</span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 transition-colors">查看</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-8 w-8 bg-primary/10 rounded-full flex items-center justify-center">
                                                <i class="fa-solid fa-truck-medical text-primary text-xs"></i>
                                            </div>
                                            <div class="ml-3">
                                                <div class="text-sm font-medium">HC-2023007</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">老年公寓A栋</td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger/10 text-danger">异常</span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-success h-2 rounded-full" style="width: 85%"></div>
                                        </div>
                                        <span class="text-xs text-gray-500">85%</span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 transition-colors">查看</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-8 w-8 bg-primary/10 rounded-full flex items-center justify-center">
                                                <i class="fa-solid fa-truck-medical text-primary text-xs"></i>
                                            </div>
                                            <div class="ml-3">
                                                <div class="text-sm font-medium">HC-2023009</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">地下车库</td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">信号弱</span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-success h-2 rounded-full" style="width: 76%"></div>
                                        </div>
                                        <span class="text-xs text-gray-500">76%</span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 transition-colors">查看</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="px-4 py-3 flex items-center justify-between border-t border-gray-100">
                        <div class="flex-1 flex justify-between sm:hidden">
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">上一页</a>
                            <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">下一页</a>
                        </div>
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    显示第 <span class="font-medium">1</span> 到 <span class="font-medium">4</span> 条，共 <span class="font-medium">15</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">上一页</span>
                                        <i class="fa-solid fa-chevron-left text-xs"></i>
                                    </a>
                                    <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">1</a>
                                    <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
                                    <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
                                    <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">5</a>
                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">下一页</span>
                                        <i class="fa-solid fa-chevron-right text-xs"></i>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-sm text-gray-500">© 2025 智能看护车监控系统. 保留所有权利.</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa-solid fa-question-circle"></i>
                        <span class="ml-1 text-sm">帮助中心</span>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa-solid fa-file-text"></i>
                        <span class="ml-1 text-sm">隐私政策</span>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa-solid fa-phone"></i>
                        <span class="ml-1 text-sm">联系我们</span>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 异常处理模态框 -->
    <div class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" id="abnormal-modal">
        <div class="min-h-screen flex items-center justify-center p-4">
            <div class="bg-white rounded-lg max-w-md w-full mx-auto animate-fade-in">
                <div class="p-5 border-b border-gray-100 flex justify-between items-center">
                    <h3 class="font-semibold text-lg">处理异常事件</h3>
                    <button class="text-gray-500 hover:text-gray-700 transition-colors" id="close-modal">
                        <i class="fa-solid fa-times"></i>
                    </button>
                </div>
                <div class="p-5">
                    <div class="flex items-start mb-4">
                        <div class="flex-shrink-0 p-3 bg-danger/10 rounded-full">
                            <i class="fa-solid fa-exclamation-triangle text-danger text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h4 class="font-medium text-gray-900">碰撞检测</h4>
                            <p class="text-sm text-gray-500 mt-1">设备HC-2023007在老年公寓A栋走廊发生轻微碰撞</p>
                            <div class="mt-2 flex items-center text-xs text-gray-500">
                                <i class="fa-solid fa-clock mr-1"></i>
                                <span>发生时间: 2025-05-16 10:30:45</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">异常描述</label>
                        <textarea rows="3" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="系统检测到设备发生碰撞..." readonly>系统检测到设备在A栋走廊与障碍物发生轻微碰撞，设备已自动停止。摄像头显示为垃圾桶倾倒导致的碰撞，无人员受伤。</textarea>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">处理措施</label>
                        <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="">选择处理措施...</option>
                            <option value="restart">重启设备</option>
                            <option value="replan">重新规划路径</option>
                            <option value="manual">人工干预</option>
                            <option value="ignore">忽略此异常</option>
                        </select>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">处理备注</label>
                        <textarea rows="2" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="请输入处理备注..."></textarea>
                    </div>
                </div>
                <div class="p-5 border-t border-gray-100 flex justify-end space-x-3">
                    <button class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                        取消
                    </button>
                    <button class="px-4 py-2 bg-primary hover:bg-primary/90 text-white text-sm font-medium rounded-md transition-colors">
                        提交处理
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 设备状态图表
            const ctx = document.getElementById('deviceStatusChart').getContext('2d');
            const deviceStatusChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
                    datasets: [{
                        label: '运行中',
                        data: [6, 8, 7, 9, 8, 8],
                        borderColor: '#00B42A',
                        backgroundColor: 'rgba(0, 180, 42, 0.1)',
                        tension: 0.3,
                        fill: true
                    }, {
                        label: '待机中',
                        data: [5, 4, 5, 3, 4, 4],
                        borderColor: '#FF7D00',
                        backgroundColor: 'rgba(255, 125, 0, 0.1)',
                        tension: 0.3,
                        fill: true
                    }, {
                        label: '离线',
                        data: [4, 3, 3, 3, 3, 3],
                        borderColor: '#F53F3F',
                        backgroundColor: 'rgba(245, 63, 63, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                boxWidth: 12,
                                usePointStyle: true,
                                pointStyle: 'circle',
                                font: {
                                    size: 11
                                }
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    },
                    interaction: {
                        mode: 'nearest',
                        axis: 'x',
                        intersect: false
                    }
                }
            });
            
            // 移动端菜单控制
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const mobileSidebar = document.getElementById('mobile-sidebar');
            const mobileSidebarClose = document.getElementById('mobile-sidebar-close');
            
            mobileMenuButton.addEventListener('click', function() {
                mobileSidebar.classList.remove('translate-x-full');
            });
            
            mobileSidebarClose.addEventListener('click', function() {
                mobileSidebar.classList.add('translate-x-full');
            });
            
            // 模态框控制
            const abnormalButtons = document.querySelectorAll('.text-primary.hover\\:text-primary\\/80.transition-colors');
            const abnormalModal = document.getElementById('abnormal-modal');
            const closeModal = document.getElementById('close-modal');
            
            abnormalButtons.forEach(button => {
                button.addEventListener('click', function() {
                    abnormalModal.classList.remove('hidden');
                });
            });
            
            closeModal.addEventListener('click', function() {
                abnormalModal.classList.add('hidden');
            });
            
            // 点击模态框外部关闭
            abnormalModal.addEventListener('click', function(e) {
                if (e.target === abnormalModal) {
                    abnormalModal.classList.add('hidden');
                }
            });
            
            // 导航栏滚动效果
            const header = document.getElementById('main-header');
            window.addEventListener('scroll', function() {
                if (window.scrollY > 10) {
                    header.classList.add('shadow');
                    header.classList.remove('shadow-sm');
                } else {
                    header.classList.remove('shadow');
                    header.classList.add('shadow-sm');
                }
            });
            
            // 实时数据模拟
            function updateDashboardData() {
                // 随机生成一些波动数据
                const onlineDevices = Math.max(8, Math.min(15, Math.floor(Math.random() * 4) + 11));
                const todayTasks = Math.max(35, Math.min(50, Math.floor(Math.random() * 10) + 38));
                const abnormalEvents = Math.floor(Math.random() * 3) + 1;
                const avgBattery = Math.max(75, Math.min(95, Math.floor(Math.random() * 15) + 80));
                
                // 更新DOM
                document.getElementById('online-devices').textContent = onlineDevices;
                document.getElementById('today-tasks').textContent = todayTasks;
                document.getElementById('abnormal-events').textContent = abnormalEvents;
                document.getElementById('avg-battery').textContent = avgBattery + '%';
                
                // 更新图表数据
                deviceStatusChart.data.datasets[0].data = [
                    Math.floor(Math.random() * 3) + 6,
                    Math.floor(Math.random() * 3) + 7,
                    Math.floor(Math.random() * 3) + 7,
                    Math.floor(Math.random() * 3) + 8,
                    Math.floor(Math.random() * 3) + 8,
                    onlineDevices
                ];
                deviceStatusChart.data.datasets[1].data = [
                    Math.floor(Math.random() * 3) + 4,
                    Math.floor(Math.random() * 3) + 3,
                    Math.floor(Math.random() * 3) + 4,
                    Math.floor(Math.random() * 3) + 3,
                    Math.floor(Math.random() * 3) + 4,
                    15 - onlineDevices - 3
                ];
                deviceStatusChart.update();
            }
            
            // 定时更新数据
            setInterval(updateDashboardData, 10000);
        });
    </script>
</body>
</html>    